<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>Home Page</title>
<asset:javascript src="js/user/user.js" />
<asset:javascript src="js/user/userValidate.js" />
</head>
<body>
<div class="wrapper">
	<div id="spinner" style="display: none;"></div>
	<div>
		<div class="col-md-6 col-md-offset-3">
			<g:render template="/home/alertMessagePartial" />
			<g:render template="/home/homePartial/signinPartial" />
			<g:render template="/home/homePartial/signupPartial" />
			<g:render template="/home/homePartial/forgotPwdPartial" />
		</div>
	</div>
	<!-- Image-->
	<div class="wallpaper col-md-8 col-md-offset-2">
		<div class="col-md-6 col-xs-12"><asset:image src="main/homewallpaper.png"/></div>
		<div class="col-md-6 col-xs-12">
			<h2>We provide the real power to make your data easy & affordable! <br><span>Cloud Sharing<span></span></h2>
			<p>Cloud storage has become an integral part of our modern, mobile lives. Services such as Google Drive, Dropbox, OneDrive, iCloud and Box all vie to hold our vital data on their servers, but which one is the best for you? We are new cloud storage services and see what we have to offer</p>
			<div class="btnsign">
				<button id="btn-signin" class="btn btn-lg btn-danger" style="width: 200px">Sign in</button><br><br>
				<p>or</p>
				<button id="btn-signup" class="btn btn-lg btn-link">Sign up</button>
			</div>
		</div>
	</div>
	<div style="clear: both"></div>
	<!-- Service feature -->
	<div class="feature">
		<div class="col-md-8 col-md-offset-2">
			<h1>Service features</h1>
			<div class="col-md-4">
				<h4><span class="fa fa-cog fa-spin"></span> Cloudsharing Web</h4>
	                <p>Manage, and sync files quickly and easily with Cloudsharing website.</p>
			</div>
			<div class="col-md-4">
				 <h4><span class="fa fa-cog fa-spin"></span> Cloudsharing Desktop</h4>
	                <p>Unlike web and mobile, desktop platform helps manage and sync quickly with actions like file manipulation on the window environment.</p>
			</div>
			<div class="col-md-4">
				<h4><span class="fa fa-cog fa-spin"></span> Cloudsharing Mobile</h4>
	                <p>In addition to managing directly on the website, users can use mobile devices to implementation of similar tasks.</p>
			</div>
		</div>
		<div style="clear: both"></div>
	</div>
	<div style="clear: both"></div>
	<!-- Screen Shoot -->
	<div class="screenshot">
		<div class="col-md-8 col-md-offset-2">
			<h1>Screenshots</h1>
			<h3>Features</h3>
			<div class="col-md-4 col-xs-4"><asset:image src="main/wallscreen.png"/></div>
			<div class="col-md-4 col-xs-4"><asset:image src="main/wallscreen2.png"/></div>
			<div class="col-md-4 col-xs-4"><asset:image src="main/wallscreen.png"/></div>
		</div>
		<div style="clear: both"></div>
	</div>
</div>
</body>
</html>